<template>
  <div>
    <el-dialog
      v-model="dialogTableVisible"
      :title="isEdit ? '修改货代信息' : '新增货代信息'"
      width="800"
    >
      <el-form style="width: 500px; margin: 0 auto" :model="freight">
        <el-form-item label="账号：">
          <el-input placeholder="请输入" v-model="freight.account" />
        </el-form-item>
        <el-form-item label="密码：">
          <el-input placeholder="请输入密码" v-model="freight.password" />
        </el-form-item>
        <el-form-item label="货代公司名称：">
          <el-input placeholder="请输入" v-model="freight.f_firm" />
        </el-form-item>
        <el-form-item label="联系人：">
          <el-input placeholder="请输入" v-model="freight.contact_person" />
        </el-form-item>
        <el-form-item label="联系电话：">
          <el-input placeholder="请输入" v-model="freight.telephone" />
        </el-form-item>
        <el-form-item label="邮箱：">
          <el-input placeholder="请输入" v-model="freight.email" />
        </el-form-item>
        <el-form-item label="运输方式：">
          <el-select placeholder="请选择运输方式" v-model="freight.shipping_method">
            <el-option label="海运" value="1" />
            <el-option label="铁路" value="2" />
            <el-option label="公路" value="3" />
            <el-option label="空运" value="4" />
            <el-option label="多联式" value="5" />
          </el-select>
        </el-form-item>
        <el-form-item label="擅长航线：">
          <el-select placeholder="请选择" v-model="freight.route">
            <el-option label="内销" value="1" />
            <el-option label="外销" value="2" />
          </el-select>
        </el-form-item>
      </el-form>
      <div style="text-align: right; margin-top: 20px">
        <el-button type="primary" @click="dialogTableVisible = false"
          >取消</el-button
        >
        <el-button type="primary" @click="isEdit ? update2() : save()"
          >保存</el-button
        >
      </div>
    </el-dialog>

    <div>
      <div></div>
      <!--  添加按钮-->
      <div style="text-align: right">
        <el-button type="primary" @click="add">添加</el-button>
      </div>

      <!--  货代列表-->
      <el-table :data="tableData" style="width: 100%" stripe border>
        <el-table-column
          type="index"
          label="行号"
          width="80"
          header-align="center"
          align="center"
        ></el-table-column>
        <el-table-column type="id" label="货代ID" width="100"></el-table-column>
        <el-table-column prop="f_firm" label="货代公司名称" width="150" />
        <el-table-column prop="contact_person" label="联系人" width="100" />
        <el-table-column prop="telephone" label="联系方式" width="120" />
        <el-table-column prop="email" label="邮箱" width="180" />
        <el-table-column prop="create_time" label="创建时间" width="220" />
        <el-table-column label="操作" width="180" align="center">
          <template #default="scope">
            <el-button
              type="primary"
              :icon="Edit"
              @click="update(scope.row)"
              circle
              title="修改"
            />
          </template>
        </el-table-column>
      </el-table>
      <!--分页-->
      <el-pagination
        background
        :page-sizes="[1, 10, 20, 30, 40, 50]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next,jumper"
        :total="total"
        @size-change="chgsize"
        @current-change="chgpg"
      />
    </div>
  </div>
</template>
<!--  vue 组件选项定义-->
<script setup>
import { ref, onMounted } from "vue";
//引入api
import { queryFreight, addFreight, getForwarderById , updateFreight } from "@/api/freight.js";
//引入图标
import { Delete, Edit } from "@element-plus/icons-vue";
//引入路由
import { useRouter } from "vue-router";
const dialogTableVisible = ref(false);
let isEdit = ref(false);
//添加客户
function add() {
  dialogTableVisible.value = true;
  isEdit.value = false;
}
//修改货代信息
async function update(row) {
  console.log("row.>", row.id);
  const id = row.id;
  let res = await getForwarderById(id);
  if (res.code == 200) {
    freight.value = res.data;
    console.log("res.data.>", res);
    isEdit.value = true;
    dialogTableVisible.value = true;
  }
}


//保存
async function save() {
  let res = await addFreight(freight.value);
  if (res.code == 200) {
    initData2();
    dialogTableVisible.value = false;
    initData();
  }
}
async function update2(row) {
  let res = await updateFreight(freight.value); // 调用更新接口
  if (res.code == 200) {
    // 保存成功后，关闭弹窗并刷新数据
    dialogTableVisible.value = false;
    initData(); // 重新加载表格数据
  } else {
    // 处理错误
    console.error("更新失败:", res.msg);
  }
}


function initData2() {
  freight.value = {
    id: "",
    f_firm: "",
    contact_person: "",
    email: "",
    shipping_method: "",
    route: "",
    create_time: "",
    account: "",
    password: ""
  };
}

const freight = ref({
  id: "",
  f_firm: "",
  contact_person: "",
  email: "",
  shipping_method: "",
  route: "",
  create_time: "",
  account: "",
  password: ""
});

//表格数据
const tableData = ref([
  {
    id: 1,
    company: "货代公司名称",
    contactName: "联系人",
    mobile: "联系方式",
    market: "邮箱",
    customer_type: "创建时间",
    customer_email: "邮箱",
    createdTime: "创建时间"
  }
]);
//路由实例
const router = useRouter();

//分页信息
const page = ref(1); //当前页
const pageSize = ref(1); //每页显示条数
const total = ref(0); //总条数

//每页记录数变化
function chgsize(size) {
  pageSize.value = size;
  initData();
}
//页面发生变化
function chgpg(pg) {
  page.value = pg;
  initData();
}

//查询数据
async function initData() {
  //请求
  let data = {
    page: page.value,
    pageSize: pageSize.value
  };
  let res = await queryFreight({ data });
  console.log("res.>", res);
  if (res.code == 200) {
    //设置数据
    tableData.value = res.data.data;
    //接收分页信息
    page.value = res.data.page;
    pageSize.value = res.data.pageSize;
    total.value = res.data.total;
  }
}


//生命周期
onMounted(() => {
  initData();
});
</script>

<style scoped></style>
